import React, { useState, useEffect } from 'react'
import PubSub from 'pubsub-js'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import Item from './components/Item/Item'
import './App.css'
export default function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      todoName: '123',
      isDone: false,
    },
    {
      id: 2,
      todoName: '345',
      isDone: true,
    },
  ])

  useEffect(() => {
    // 挂载的时候订阅
    const addId = PubSub.subscribe('add', (topic, todoName) => {
      // console.log(todoName)

      // setTodos(newTodos)
      setTodos((todos) => {
        // 这个回调函数一定是在上一次数据修改完毕之后调用
        // 这个todos,就是setTodos所对应的最新的最正确的数据

        // 根据任务名创建任务对象
        const todo = {
          todoName,
          isDone: false,
          // 需求: 要求是整数,并且不能和其他的数据的id重复
          // 思路: 找数组中的最后一个数据的id+1. 如果数组为空,则新增数据的id为1
          id: todos.length ? todos[todos.length - 1].id + 1 : 1,
        }
        const newTodos = [...todos]
        newTodos.push(todo)
        return newTodos // setTodos如果传入回调,则回调的返回值是什么,setTodos所对应的数据就被改成了什么
      })
    })
    return () => {
      //卸载的时候取消订阅
      PubSub.unsubscribe(addId)
    }
  }, [])
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header></Header>
        <div>
          <List>
            {todos.map((item) => {
              return <Item key={item.id} todo={item}></Item>
            })}
          </List>
          <Footer></Footer>
        </div>
      </div>
    </div>
  )
}
